<template>
	<el-card class="box-card">
		<el-row style="line-height: 60px;font-size: 18px;">
			<el-col :span="20">客户列表</el-col>
		</el-row>
		<el-table :data="tableData" border stripe style="width: 100%;">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column label="姓名">
				<template slot-scope="scope">
					<span @click="detail(scope.row)" style="cursor: pointer;color:#50bfff;">{{scope.row.nickName}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机" width="150">
			</el-table-column>
			<el-table-column prop="site" label="位置">
			</el-table-column>
			<el-table-column prop="createTime" label="注册时间" width="200">
			</el-table-column>
			<el-table-column prop="consumerTotal" label="消费额">
			</el-table-column>
			<el-table-column prop="orderNums" label="订单总数">
			</el-table-column>
			<el-table-column label="操作" width="130">
				<template slot-scope="scope">
					<el-button size="small" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" layout="prev, pager, next" :total="count">
		</el-pagination>
		
	</el-card>
</template>

<script>
	import { parentsList, parentsDelete} from '@/api/getData'
	export default {
		data() {
			return {
				findForm: {
					name: '',
					typeId: "4",
				},
				tableData: [],
				limit: 10,
				count: 0,
				currentPage: 1,
			};
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					const returnData = await parentsList({
						pageNum: this.currentPage.toString(),
						pageSize: this.limit.toString()
					});
					if(returnData.code == "0") {
						this.tableData = returnData.list.rows;
						this.count = Number(returnData.list.total);
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log("每页 ${val} 条");
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.initData();
			},
			async handleDeleteData(index, row) {
				try {
					let returnData = await parentsDelete({
						id: row.id
					});
					if(returnData.code == "0") {
						this.tableData.splice(index, 1);
						this.$message({
							message: "删除成功！",
							type: 'success'
						});
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			handleDelete(index, row) {
				this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleDeleteData(index, row);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除操作'
					});
				});

			},

			detail(row) {
				this.$router.push({
					path: 'courseDetail',
					query: {
						id: row.id
					}
				})
			},
			find() {
				this.initData();
			},

		}
	}
</script>

<style scoped>
.box-card{
	margin: 0 10px;
}

.page{
    text-align: right;margin-top:10px;padding:0px;
}

</style>